<script setup lang='ts' name="admin-role">
import type { VxeGridInstance, VxeGridListeners } from 'vxe-table'

import { delAdminRoles, rIndexAdminRoles } from '@fl/api/iam-api'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElCard } from 'element-plus'

import type { IRowV0 } from './types'

import addItem from './component/add/index.vue'
import treeSelect from './component/tree/index.vue'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const { btns, gridOptions } = useTable()
const { form, schema } = useForm()

// const router = useRouter()
const dialogTreeVisible = ref(false)
const addDialog = ref(false)
const detail = ref<any>({})
const addItemRef = ref()
const xGrid = ref<VxeGridInstance<IRowV0>>()

const gridEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()

async function getData() {
    gridOptions.loading = true
    rIndexAdminRoles({
        ...form.value,
        page: gridOptions.pagerConfig.currentPage,
        page_size: gridOptions.pagerConfig.pageSize,
    }).then((res: any) => {
        gridOptions.pagerConfig.total = res.total ?? 0
        gridOptions.data = res?.items ?? []
        gridOptions.loading = false
    })
}

function reset() {
    form.value = {
        // group_name: '',
        keyword: '',
        // module_name: '',
        order: 'desc',
        sort_by: 'create_time',
    }
    getData()
}

function doAction(item: any, row: any) {
    if (item.value === 'edit') {
        detail.value = row
        addDialog.value = true
        addItemRef.value.init(false)
    }
    else if (item.value === 'patch') {
        dialogTreeVisible.value = true
        getData()
    }
    else {
        delAdminRoles(row.id)
        getData()
    }
}

function doAdd() {
    addDialog.value = true
    addItemRef.value.init()
}

function resetAuth() {
    dialogTreeVisible.value = false
}
function submitAuth() {
    dialogTreeVisible.value = false
}
</script>

<template>
    <ElCard class="mb-20">
        <PlusForm v-model="form"
                  :row-props="{ gutter: 20 }"
                  :columns="schema"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="getData"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm>
    </ElCard>

    <ElCard>
        <div class="mb-20">
            <ElButton type="primary"
                      @click="doAdd"
            >
                新增
            </ElButton>
        </div>
        <!-- 列表 -->
        <vxe-grid ref="xGrid"
                  v-bind="gridOptions"
                  v-on="gridEvents"
        >
            <template #operate="{ row }">
                <ButtonItem :btns="btns"
                            @btn-click="doAction($event, row)"
                />
            </template>
        </vxe-grid>
    </ElCard>

    <addItem ref="addItemRef"
             v-model="addDialog"
             :data="detail"
             @confirm="getData"
    />

    <el-dialog v-model="dialogTreeVisible"
               title="【系统管理员】权限分配"
               width="800"
               :destroy-on-close="true"
    >
        <tree-select />

        <template #footer>
            <div class="dialog-footer">
                <ElButton @click="resetAuth">
                    取消
                </ElButton>

                <ElButton type="primary"
                          @click="submitAuth"
                >
                    确认
                </ElButton>
            </div>
        </template>
    </el-dialog>
</template>
